﻿@{
    ViewBag.Title = "ShowCase";
    Layout = "~/Views/Shared/_Layout.he-IL.cshtml";
   
}
@section slider
{
    @Html.Partial("_SlideShow")
}
<script src="@Url.Content("/Content/js/jquery-1.2.6.min.js")" type="text/javascript"></script>
<style type="text/css">
    #1image, #3image, #2image, #4image, #5image, #6image, #7image, #8image, #9image
    {
        display: none;
        height: 230px;
        width: 180px;
        margin-bottom: -100px;
        margin-right: -10px;
    }
    
    #wrap
    {
        width: 410px;
        height: 500px;
        float: left;
    }
    
    #wrap img
    {
        cursor: pointer;
    }
    
    
    #frame
    {
        float: left;
        width: 220px;
        height: 230px;
        padding: 10px;
    }
    
    #main
    {
       
    }
    
    div.imagePlace
    {
        float: left;
        margin-left: 4px;
        margin: 0px;
        margin-top: 15px;
        height: 100px;
    }
    
    img.a
    {
        position: absolute;
        z-index: 10;
        opacity: 1.0;
        height: 100px;
        width: 80px;
        margin: 20px;
        margin-top: 15px;
        border: 5px solid #eee;
    }
    img.a:hover
    {
        border: 2px solid #555;
    }
    
    img.b
    {
        opacity: 1.0;
        height: 100px;
        width: 80px;
        margin: 20px;
        margin-top: 15px;
    }
    
    #frame .caption
    {
        border: solid #CCCCCC 1px;
        height: 35px;
        padding: 5px;
        text-shadow: 0px -1px 0px #374683;
        text-align: justify;
        filter: dropshadow(color=#e5e5ee,offX=0,offY=1);
        font-family: "Courier New" , Courier, monospace;
        font-size: 12px;
        margin-top: 2px;
        color: #FFFFFF;
    }
    IMG.HoverBorder
    {
        border: 5px solid #eee;
    }
    IMG.HoverBorder:hover
    {
        border: 5px solid #555;
    }
    
    
    
    .caption
    {
        display: none;
    }
    #topBottom table tbody tr td
    {
        vertical-align: top;
        border: none;
    }
</style>
<script type='text/javascript'>
    $(document).ready(function () {
        $("img.a").hover(
	function () {
	    $(this).stop().animate({ "opacity": "0" }, "slow");
	},
	function () {
	    $(this).stop().animate({ "opacity": "1" }, "slow");
	});

    });
</script>
<script type="text/javascript">

$( init );
var num =0;
function init() {
	
	$('img.a').click( function() {
		
		var num = Math.floor(Math.random()*15);
		
		hideImage(num);
		
		var id   = $(this).attr("id");
		$('#'+id+'_caption').show();
		
		$('#'+id+'image').animate( {
			  bottom: '0px',
			  width: '210px',
			  height: '290px',
			  opacity: 1,
			},300 );
		 
	} );
}
function hideImage(num)
{
	if(num%2 == 0)
	{
		$('img#1image').width(0).hide()
        { 

        

        };
		$('img#2image').width(0).hide();
		$('img#3image').width(0).hide();
		$('img#4image').width(0).hide();
		$('img#5image').width(0).hide();
		$('img#6image').width(0).hide();
        $('img#7image').width(0).hide();
		$('img#8image').width(0).hide();
		$('img#9image').width(0).hide();
	}
	else
	{
		$('img#1image').height(0).hide();
		$('img#2image').height(0).hide();
		$('img#3image').height(0).hide();
		$('img#4image').height(0).hide();
		$('img#5image').height(0).hide();
		$('img#6image').height(0).hide();
        $('img#7image').height(0).hide();
		$('img#8image').height(0).hide();
		$('img#9image').height(0).hide();
	}
	
	$('#1_caption').hide();
	$('#2_caption').hide();
	$('#3_caption').hide();
	$('#4_caption').hide();
	$('#5_caption').hide();
	$('#6_caption').hide();
    $('#7_caption').hide();
	$('#8_caption').hide();
	$('#9_caption').hide();
}

</script>
<div style="vertical-align:top;margin:0px;padding:0px;">
        
     <h3>לחץ כאן כדי להציג נושא</h3>
    <div align="center" style="margin-top: 50px;">
        <div id="wrap">
            <div class="imagePlace" class="highlightit">
                <img src="../../Content/data1/images/1.png" width="180" id="1" class="a" />
                <img src="../../Content/data1/images/1.png" width="180" class="b" />
            </div>
            <div class="imagePlace">
                <img src="../../Content/data1/images/10.png" width="180" id="2" class="a" />
                <img src="../../Content/data1/images/10.png" width="180" class="b" />
            </div>
            <div class="imagePlace">
                <img src="../../Content/data1/images/3.png" width="180" id="3" class="a" />
                <img src="../../Content/data1/images/3.png" width="180" class="b" />
            </div>
            <div class="imagePlace">
                <img src="../../Content/data1/images/4.png" width="180" id="4" class="a" />
                <img src="../../Content/data1/images/4.png" width="180" class="b" />
            </div>
            <div class="imagePlace">
                <img src="../../Content/data1/images/5.png" width="180" id="5" class="a" />
                <img src="../../Content/data1/images/5.png" width="180" class="b" />
            </div>
            <div class="imagePlace">
                <img src="../../Content/data1/images/6.png" width="180" id="6" class="a" />
                <img src="../../Content/data1/images/6.png" width="180" class="b" />
            </div>
            <div class="imagePlace">
                <img src="../../Content/data1/images/7.png" width="180" id="7" class="a" />
                <img src="../../Content/data1/images/7.png" width="180" class="b" />
            </div>
            <div class="imagePlace">
                <img src="../../Content/data1/images/8.png" width="180" id="8" class="a" />
                <img src="../../Content/data1/images/8.png" width="180" class="b" />
            </div>
            <div class="imagePlace">
                <img src="../../Content/data1/images/9.png" width="180" id="9" class="a" />
                <img src="../../Content/data1/images/9.png" width="180" class="b" />
            </div>
        </div>
  

    <TABLE WIDTH=250 BORDER=0 CELLPADDING=0 CELLSPACING=0>
	<TR>
		<TD COLSPAN=3>
			<IMG style="margin-bottom:-15px;" SRC="../../Content/phone/Mobile_01.png" WIDTH=250 HEIGHT=77 ALT=""></TD>
	</TR>
	<TR>
		<TD>
        	<IMG style="margin-left:-150px; margin-top:-5px;" SRC="../../Content/phone/Mobile_04.png" WIDTH=25 HEIGHT=294 ALT=""></TD>
			
		<TD>

	
             <div id="PageContainer">
                        <div style="margin-top: -10px; margin-left:-25px; " id="frame">
                            <img  src="../../Content/data1/images/1.png" width="" id="1image" style="display: block;
                                height: 290px; width: 200px; margin-right:10px;" />
                            <img src="../../Content/data1/images/10.png" width="" id="2image" style="display: none;
                                height: 230px; width: 250px;" />
                            <img src="../../Content/data1/images/3.png" width="" id="3image" style="display: none;
                                height: 230px; width: 250px;" />
                            <img src="../../Content/data1/images/4.png" width="" id="4image" style="display: none;
                                height: 230px; width: 250px;" />
                            <img src="../../Content/data1/images/5.png" width="" id="5image" style="display: none;
                                height: 230px; width: 250px;" />
                            <img src="../../Content/data1/images/6.png" width="" id="6image" style="display: none;
                                height: 230px; width: 250px;" />
                            <img src="../../Content/data1/images/7.png" width="" id="7image" style="display: none;
                                height: 230px; width: 250px;" />
                            <img src="../../Content/data1/images/8.png" width="" id="8image" style="display: none;
                                height: 230px; width: 250px;" />
                            <img src="../../Content/data1/images/9.png" width="" id="9image" style="display: none;
                                height: 230px; width: 250px;" />
                        </div>
                    </div>
            
            
            </TD>
		<TD>
			<IMG  SRC="../../Content/phone/Mobile_02.png" WIDTH=25 HEIGHT=294 ALT=""></TD>
	</TR>
	<TR>
		<TD COLSPAN=3>
			<IMG style="margin-top:-10px;" SRC="../../Content/phone/Mobile_05.png" WIDTH=250 HEIGHT=84 ALT=""></TD>
	</TR>
</TABLE>



    </div>
   </div>
<style type="text/css">
    #PageContainer
    {
      
        margin: 0px;
        padding: 0px;
        width: 250px;
        margin-left: 0px;
        position: relative;
    }
    #PageContainer span
    {
    }
</style>
